<template>
	<view>a
	<view class="container" v-if="isShow">
		<custom-header title="提现记录"></custom-header>

		<!-- Tab 栏 -->
		<view class="tabs">
			<text class="tab-item" :class="{ active: status === 0 }" @click="changeTab(0)">全部</text>
			<text class="tab-item" :class="{ active: status === 1 }" @click="changeTab(1)">处理中</text>
			<text class="tab-item" :class="{ active: status === 2 }" @click="changeTab(2)">成功</text>
			<text class="tab-item" :class="{ active: status === 3 }" @click="changeTab(3)">失败</text>
		</view>

		<!-- 订单列表 -->
		<scroll-view scroll-y enable-back-to-top @scrolltolower="loadMore" @refresherrefresh="onRefresh"
			refresher-enabled :refresher-triggered="isRefreshing" style="height: 100%; padding: 0 24rpx;">
			<block v-for="(item, index) in recordList" :key="index">
				<view class="order-item" @click="toOrderDetail(item.orderNo)">
					<view class="order-item-one">
						<view style="display: flex; align-items: center;">
							<text class="order-item-title-text">单号：{{ item.orderNo ? item.orderNo : '-'}}</text>
							<image src="/static/images/ic_copy.png" style="height: 24rpx; width: 24rpx;"
								@click.stop="toCopy(item.orderNo)"></image>
						</view>
						<view class="order-status"
							:style="{ color: getStatusColor(item.status), border: `2rpx solid ${getStatusColor(item.status)}`, backgroundColor: getStatusBgColor(item.status) }">
							{{ getStatusName(item.status) }}
						</view>
					</view>

					<view class="order-item-two">
						<image
							:src="item.actionType == '提现' ? '../../static/images/ic_without.png' : '../../static/images/ic_sale.png'">
						</image>
						<view>
							<view style="color: #000; font-size: 24rpx; margin-bottom: 4rpx;">
								{{ item.withdrawalType }}
							</view>
							<view style="color: rgba(0, 0, 0, 0.60); font-size: 20rpx;">申请时间：{{item.createTime}}</view>
						</view>
					</view>

					<view class="order-item-three">
						<view style="margin-right: 52rpx; font-size: 24rpx; color: rgba(0, 0, 0, 0.80);">提现金额：<text
								style="font-size: 28rpx; font-weight: bold;">￥{{item.amount}}</text></view>
						<view style="color: rgba(0, 0, 0, 0.80);">到账金额：<text
								style=" font-size: 28rpx; font-weight: bold;">￥{{item.realAmount}}</text></view>
					</view>
				</view>
			</block>
			<view v-if="loadingMore" class="loading-more">加载中...</view>
			<view v-if="noMoreData" class="no-more-data">已经全部加载完毕</view>
		</scroll-view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0, // 当前标签 0全部 1-待审核，2-成功，3-失败
				recordList: [], //记录列表
				loadingMore: false, //加载中
				noMoreData: false, //没有更多
				page: 1,
				pageSize: 10,
				isRefreshing: false, //正在刷新
				total: 0, //总数据量
				isEnd: false, // 是否全部加载完成
				isShow: uni.getStorageSync("isShow"),
			};
		},
		onLoad() {
			this.fetchRecord(0)
		},
		methods: {
			changeTab(tab) {
				this.status = tab;

				this.fetchRecord(1);
			},
			onRefresh() {
				this.isRefreshing = true;
				this.resetPagination();
				this.fetchRecord(1);
			},
			// 清空状态
			resetPagination() {
				this.page = 1;
				this.recordList = [];
				this.loadingMore = false;
				this.noMoreData = false;
			},
			loadMore() {
				if (!this.loadingMore && !this.noMoreData) {
					this.loadingMore = true;
					this.page += 1;
					this.fetchRecord(2)
				}
			},
			getStatusColor(status) {
				if (status == 1) return '#FC926A';
				if (status == 2) return '#6AE8BD';
				if (status == 3) return '#FA5151';
				return '#000';
			},
			getStatusBgColor(status) {
				if (status == 1) return '#FFEBE3';
				if (status == 2) return '#EEFAF6';
				if (status == 3) return '#FDE8E8';
				return '#000';
			},
			// 获取订单状态
			getStatusName(status) {
				if (status == 1) return '待审核';
				if (status == 2) return '成功';
				if (status == 3) return '失败';
				return '成功';
			},
			// 请求订单数据 states 0=初始化 1=刷新 2=加载
			async fetchRecord(states) {
				try {
					const res = await this.$http({
						method: 'GET',
						url: '/user/withdrawal/record',
						data: {
							pageSize: this.pageSize,
							pageNum: this.page,
							status: this.status == 0 ? '' : this.status
						}
					});

					//状态修改
					if (states == 1) {
						this.isRefreshing = false
					} else if (states == 2) {
						this.loadingMore = false;
					}

					// 首次加载
					if (this.page === 1) {
						this.recordList = res.rows
						this.total = res.total
					} else {
						// 追加数据
						this.recordList = [...this.recordList, ...res.rows]
					}

					// 判断是否加载完成
					this.isEnd = (this.page * this.pageSize) >= res.total

					// 翻页或加载到最后了
					if (!this.isEnd) {
						this.page++;
					} else {
						this.noMoreData = true;
					}
				} catch (error) {
					//TODO handle the exception
					if (states == 1) {
						this.isRefreshing = false
					} else if (states == 2) {
						this.loadingMore = false;
					}
				}

			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F7FAFF;
	}

	// tab切换
	.tabs {
		display: flex;
		margin-bottom: 20rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.45);
		padding: 20rpx 0;
		transition: all 0.3s;
	}

	.tab-item.active {
		color: #4D7EF4;
		font-weight: bold;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80rpx;
		height: 8rpx;
		border-radius: 4rpx;
		background-color: #4D7EF4;
	}

	.order-status {
		font-size: 20rpx;
		padding: 6rpx 18rpx;
		border-radius: 10rpx;
	}

	.order-item {
		border-radius: 12rpx;
		background-color: white;
		padding: 30rpx 60rpx;

		.order-item-one {
			display: flex;
			align-items: center;
			margin-bottom: 42rpx;
			justify-content: space-between;

			.order-item-title-text {
				color: rgba(0, 0, 0, 0.60);
				font-size: 24rpx;
				margin-right: 6rpx;
			}
		}

		.order-item-two {
			display: flex;
			margin-bottom: 70rpx;

			image {
				height: 80rpx;
				width: 80rpx;
				margin-right: 18rpx;
			}
		}

		.order-item-three {
			justify-content: flex-end;
			display: flex;
			align-items: center;
		}
	}

	// 加载更多
	.loading-more,
	.no-more-data {
		text-align: center;
		padding: 10px;
	}
</style>